<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- qquickitemanimation.cpp -->
  <title>ParentAnimation QML 类型 | Qt Quick 5.12.3</title>
  <link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
  <script type="text/javascript">
    document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
    // loading style sheet breaks anchors that were jumped to before
    // so force jumping to anchor again
    setTimeout(function() {
        var anchor = location.hash;
        // need to jump to different anchor first (e.g. none)
        location.hash = "#";
        setTimeout(function() {
            location.hash = anchor;
        }, 0);
    }, 0);
  </script>
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="main">
    <div class="main-rounded">
      <div class="navigationbar">
        <table><tr>
<td ><a href="../qtdoc/index.html">Qt 5.12</a></td><td ><a href="qtquick-index.html">Qt Quick 模块</a></td><td ><a href="qtquick-qmlmodule.html">QML类型</a></td><td >ParentAnimation QML 类型</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="qtquick-index.html">Qt 5.12.3 参考指南</a></td>
        </tr></table>
      </div>
    </div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">目录</a></h3>
<ul>
<li class="level1"><a href="#properties">属性</a></li>
<li class="level1"><a href="#details">详细信息</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">ParentAnimation QML 类型</h1>
<span class="subtitle"></span>
<!-- $$$ParentAnimation-brief -->
<p>Animates changes in parent values. <a href="#details">更多...</a></p>
<!-- @@@ParentAnimation -->
<div class="table"><table class="alignedsummary">
<tr><td class="memItemLeft rightAlign topAlign"> 导入语句：</td><td class="memItemRight bottomAlign"> import QtQuick 2.12</td></tr><tr><td class="memItemLeft rightAlign topAlign"> Since:</td><td class="memItemRight bottomAlign">  Qt 5.0</td></tr><tr><td class="memItemLeft rightAlign topAlign">继承自：</td><td class="memItemRight bottomAlign"> <p><a href="qml-qtquick-animation.html">Animation</a></p>
</td></tr></table></div><ul>
<li><a href="qml-qtquick-parentanimation-members.html">所有成员的列表，包括继承成员</a></li>
</ul>
<a name="properties"></a>
<h2 id="properties">属性</h2>
<ul>
<li class="fn"><b><b><a href="qml-qtquick-parentanimation.html#newParent-prop">newParent</a></b></b> : Item</li>
<li class="fn"><b><b><a href="qml-qtquick-parentanimation.html#target-prop">target</a></b></b> : Item</li>
<li class="fn"><b><b><a href="qml-qtquick-parentanimation.html#via-prop">via</a></b></b> : Item</li>
</ul>
<!-- $$$ParentAnimation-description -->
<a name="details"></a>
<h2 id="details">详细信息</h2>
<p><a href="qml-qtquick-parentanimation.html">ParentAnimation</a> is used to animate a parent change for an <a href="qml-qtquick-item.html">Item</a>.</p>
<p>For example, the following <a href="qml-qtquick-parentchange.html">ParentChange</a> changes <code>blueRect</code> to become a child of <code>redRect</code> when it is clicked. The inclusion of the <a href="qml-qtquick-parentanimation.html">ParentAnimation</a>, which defines a <a href="qml-qtquick-numberanimation.html">NumberAnimation</a> to be applied during the transition, ensures the item animates smoothly as it moves to its new parent:</p>
<pre class="qml">

  import QtQuick 2.0

  <span class="type"><a href="qml-qtquick-item.html">Item</a></span> {
      <span class="name">width</span>: <span class="number">200</span>; <span class="name">height</span>: <span class="number">100</span>

      <span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> {
          <span class="name">id</span>: <span class="name">redRect</span>
          <span class="name">width</span>: <span class="number">100</span>; <span class="name">height</span>: <span class="number">100</span>
          <span class="name">color</span>: <span class="string">&quot;red&quot;</span>
      }

      <span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> {
          <span class="name">id</span>: <span class="name">blueRect</span>
          <span class="name">x</span>: <span class="name">redRect</span>.<span class="name">width</span>
          <span class="name">width</span>: <span class="number">50</span>; <span class="name">height</span>: <span class="number">50</span>
          <span class="name">color</span>: <span class="string">&quot;blue&quot;</span>

          <span class="name">states</span>: <span class="name">State</span> {
              <span class="name">name</span>: <span class="string">&quot;reparented&quot;</span>
              <span class="type"><a href="qml-qtquick-parentchange.html">ParentChange</a></span> { <span class="name">target</span>: <span class="name">blueRect</span>; <span class="name">parent</span>: <span class="name">redRect</span>; <span class="name">x</span>: <span class="number">10</span>; <span class="name">y</span>: <span class="number">10</span> }
          }

          <span class="name">transitions</span>: <span class="name">Transition</span> {
              <span class="type"><a href="qml-qtquick-parentanimation.html">ParentAnimation</a></span> {
                  <span class="type"><a href="qml-qtquick-numberanimation.html">NumberAnimation</a></span> { <span class="name">properties</span>: <span class="string">&quot;x,y&quot;</span>; <span class="name">duration</span>: <span class="number">1000</span> }
              }
          }

          <span class="type"><a href="qml-qtquick-mousearea.html">MouseArea</a></span> { <span class="name">anchors</span>.fill: <span class="name">parent</span>; <span class="name">onClicked</span>: <span class="name">blueRect</span>.<span class="name">state</span> <span class="operator">=</span> <span class="string">&quot;reparented&quot;</span> }
      }
  }

</pre>
<p>A <a href="qml-qtquick-parentanimation.html">ParentAnimation</a> can contain any number of animations. These animations will be run in parallel; to run them sequentially, define them within a <a href="qml-qtquick-sequentialanimation.html">SequentialAnimation</a>.</p>
<p>In some cases, such as when reparenting between items with clipping enabled, it is useful to animate the parent change via another item that does not have clipping enabled. Such an item can be set using the <a href="qml-qtquick-parentanimation.html#via-prop">via</a> property.</p>
<p><a href="qml-qtquick-parentanimation.html">ParentAnimation</a> is typically used within a <a href="qmlexampletoggleswitch.html#transition">Transition</a> in conjunction with a <a href="qml-qtquick-parentchange.html">ParentChange</a>. When used in this manner, it animates any <a href="qml-qtquick-parentchange.html">ParentChange</a> that has occurred during the state change. This can be overridden by setting a specific target item using the <a href="qml-qtquick-parentanimation.html#target-prop">target</a> property.</p>
<p><b>请参考 </b><a href="qtquick-statesanimations-animations.html">Animation 和 Transitions in Qt Quick</a> 和 <a href="qtquick-animation-example.html">Qt Quick 示例 - Animation</a>。</p>
<!-- @@@ParentAnimation -->
<h2>属性文档</h2>
<!-- $$$newParent -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="newParent-prop">
<td class="tblQmlPropNode"><p>
<a name="newParent-prop"></a><span class="name">newParent</span> : <span class="type"><a href="qml-qtquick-item.html">Item</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>The new parent to animate to.</p>
<p>If the <a href="qml-qtquick-parentanimation.html">ParentAnimation</a> is defined within a <a href="qmlexampletoggleswitch.html#transition">Transition</a>, this value defaults to the value defined in the end state of the <a href="qmlexampletoggleswitch.html#transition">Transition</a>.</p>
</div></div><!-- @@@newParent -->
<br/>
<!-- $$$target -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="target-prop">
<td class="tblQmlPropNode"><p>
<a name="target-prop"></a><span class="name">target</span> : <span class="type"><a href="qml-qtquick-item.html">Item</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>The item to reparent.</p>
<p>When used in a transition, if no target is specified, all <a href="qml-qtquick-parentchange.html">ParentChange</a> occurrences are animated by the <a href="qml-qtquick-parentanimation.html">ParentAnimation</a>.</p>
</div></div><!-- @@@target -->
<br/>
<!-- $$$via -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="via-prop">
<td class="tblQmlPropNode"><p>
<a name="via-prop"></a><span class="name">via</span> : <span class="type"><a href="qml-qtquick-item.html">Item</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>The item to reparent via. This provides a way to do an unclipped animation when both the old parent and new parent are clipped.</p>
<pre class="qml">

  <span class="type"><a href="qml-qtquick-parentanimation.html">ParentAnimation</a></span> {
      <span class="name">target</span>: <span class="name">myItem</span>
      <span class="name">via</span>: <span class="name">topLevelItem</span>
      <span class="comment">// ...</span>
  }

</pre>
<p><b>Note: </b>This only works when the <a href="qml-qtquick-parentanimation.html">ParentAnimation</a> is used in a <a href="qmlexampletoggleswitch.html#transition">Transition</a> in conjunction with a <a href="qml-qtquick-parentchange.html">ParentChange</a>.</p></div></div><!-- @@@via -->
<br/>
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2019 The Qt Company Ltd.
   Documentation contributions included herein are the copyrights of
   their respective owners.<br/>    The documentation provided herein is licensed under the terms of the    <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation    License version 1.3</a> as published by the Free Software Foundation.<br/>    Qt and respective logos are trademarks of The Qt Company Ltd.     in Finland and/or other countries worldwide. All other trademarks are property
   of their respective owners. </p>
</div>
</body>
</html>
